import React from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { apiPrefix } from 'shared/api';
import './index.less';
// 删除单个证书api, 类型delete:  http://192.168.31.44:9292/api/v1/certificate/type?id=id

export default class Home extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      book: [],
    };
  }
  // 生命周期 立即执行函数获取后端数据
  componentDidMount() {
    const api = `${apiPrefix}api/v1/certificate/types`;
    axios.get(api)
      .then((res) => {
        // res.data.data后端返回的证书列表
        this.setState({ book: res.data.data });
      });
  }
  delBook=(bookId) => {
    const api = `${apiPrefix}api/v1/certificate/types?id=${bookId}`;
    axios.delete(api, { withCredentials: true });
  }
  render() {
    const bookList = this.state.book;
    return (
      <div className="content">
        <div>
          <div>
            <h3>证书类型管理</h3>
          </div>
          <div className="contentTable" >
            <table>
              <thead>
                <tr className="w50">
                  <th className="w50">序号</th>
                  <th className="w240">证书名称</th>
                  <th className="w200">证书等级</th>
                  <th className="w360">证书全称</th>
                  <th className="w170">证书有效期(月)</th>
                  <th className="w120">
                    <Link className="add-certificate" to="/Certificate/CertificateType/CertificateTypeForm">添加</Link>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>查询</td>
                  <td><input type="text" className="certificate-name" /></td>
                  <td><input type="text" className="certificate-class" /></td>
                  <td><input type="text" className="certificate-fullname" /></td>
                  <td><input type="text" className="certificate-time" /></td>
                </tr>
                {
                  bookList.map((value, index) => (
                    <tr key={index}>
                      <td>{index + 1}</td>
                      <td>{value.name}</td>
                      <td>{value.level}</td>
                      <td>{value.fullname}</td>
                      <td>{value.exp_date}</td>
                      <td>
                        <button className="compile-certificate">
                          <Link to={`/Certificate/CertificateType/CertificateTypeForm/${value.id}`} >编辑</Link>
                        </button>
                        {/* 获取要删除的id 传入delBook */}
                        <button className="delete-certificate"onClick={() => this.delBook(value.id)}>删除</button>
                      </td>
                    </tr>
                  ))
                 }
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  }
}
